<template>
    <div>
        <div class="item" v-for="(item, index) of list" :key="index" @click="handleChildrenClick">
            <div class="item-title border-bottom">
                <span class="item-title-icon">{{item.title}}</span>
            </div>
            <!--递归组件-->
            <div v-if="item.children" class="item-children" v-show="show" @click="handleChildrenClick">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>

<script>
   export default {
      name: "DetailList",
      props:{
         list:Array
      },
      data () {
         return {
            show:false
         }
      },
      methods:{
         handleChildrenClick () {
            this.show=!this.show
         }
      }
   }
</script>

<style lang="stylus" scoped>
    .item-title-icon
      position relative
      top .08rem
      padding-left .5rem
      display inline-block
      height .36rem
      background url("http://s.qunarzz.com/piao/image/touch/sight/detail.png") 0 -.45rem no-repeat
      margin-right .1rem
      background-size .4rem 3rem
    .item-title
      line-height .8rem
      font-size .32rem
      padding 0 .2rem
    .item-children
      padding 0 .2rem
</style>